import React, { useContext } from 'react'
import { Modal, Form, Input, Button, Cascader } from 'antd'
import { hospitalAdminUserContext } from '../../../context'
import {
  validateName,
  validatorPhone,
  validateEmail,
  validateAreaCode,
  validateAreaCodePhone,
} from '@/utils/formValidator'
import style from './style.module.less'

export default () => {
  const { cityMocalConfig, cityTopConfig } = useContext(hospitalAdminUserContext)

  const initState = () => {
    let str = ''
    switch (cityMocalConfig.cityModalType) {
      case 1:
        str = '新增地区管理员'
        break
      case 2:
        str = '编辑地区管理员'
        break
      case 3:
        str = '查看'
        break
      default:
        str = ''
    }
    return str
  }

  return (
    <div>
      <div>
        <Modal
          width={600}
          footer={null}
          title={initState()}
          open={cityMocalConfig.cityisModalOpen}
          onCancel={cityTopConfig.cityhandleCancel}
        >
          <Form
            form={cityMocalConfig.cityForm}
            name='basic'
            disabled={cityMocalConfig.cityModalType === 3}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={cityMocalConfig.cityOnFinish}
            // onFinishFailed={onFinishFailed}
            autoComplete='off'
          >
            <Form.Item label='所属地区' name='areaId' rules={[{ required: true, message: '请选择地区!' }]}>
              <Cascader
                options={cityMocalConfig.cityModalRegion}
                expandTrigger='hover'
                placeholder='请选择地区'
                disabled={cityMocalConfig.cityModalType === 2}
                // onChange={cityTopConfig.getAreaSelectValue}
              />
            </Form.Item>
            <Form.Item label='负责人姓名' name='name' rules={[{ required: true, validator: validateName }]}>
              <Input maxLength={30} placeholder='请输入姓名' />
            </Form.Item>
            <Form.Item label='手机号' name='phone' rules={[{ required: true, validator: validatorPhone }]}>
              <Input maxLength={11} placeholder='请输入手机号' />
            </Form.Item>
            <Form.Item
              label={
                <div style={{ display: 'flex' }}>
                  <div className={style.xinghao}>* </div>
                  <div>护理部电话</div>
                </div>
              }
            >
              <Form.Item name={['areaCode']} rules={[{ required: true, validator: validateAreaCode }]} noStyle>
                <Input maxLength={4} style={{ width: '40%' }} placeholder='区号，如010' />
              </Form.Item>
              <span style={{ margin: '0 8px' }}>-</span>
              <Form.Item name={['phoneCode']} rules={[{ required: true, validator: validateAreaCodePhone }]} noStyle>
                <Input maxLength={8} style={{ width: '53%' }} placeholder='电话号码，如12345678' />
              </Form.Item>
            </Form.Item>
            <Form.Item label='邮箱' name='email' rules={[{ required: true, validator: validateEmail }]}>
              <Input placeholder='请输入邮箱' />
            </Form.Item>
            {cityMocalConfig.cityModalType !== 3 && (
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <div className={style.modalBtn}>
                  <Button onClick={cityTopConfig.cityhandleCancel} style={{ width: 80, marginRight: 20 }}>
                    取消
                  </Button>
                  <Button style={{ width: 80 }} type='primary' htmlType='submit'>
                    确定
                  </Button>
                </div>
              </Form.Item>
            )}
          </Form>
        </Modal>
      </div>
    </div>
  )
}
